<template>
	<div class="collection">
		<div id="kong">
			<img class="kong-img" src="../../img-shopping/pic@2x.png"/>
			<p class="kong-p">这里没有任何商品呢</p>
			<div @click="zhuye()" class="kong-b"><span class="kong-btn">去首页</span></div>
		</div>
		<div class="collection-list" v-for="(item,index) in datalist">
			<span class="collection-photo"><img :src="'http://www.ntyouxuan.com/'+item.default_image"/></span>
			<div class="collection-xinxi">
				<h3 v-text="item.goods_name"></h3>
				<span v-text="'￥'+item.price"></span>
			</div>
			<div class="collection-btn"><span class="nocollection" @click="delcollection(item.goods_id,index)">取消收藏</span><router-link :to="{name:'shopXQ',params:{id:item.goods_id}}" class="lookshop">查看商品</router-link></div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'collection',
		data(){
			return{
				user:0,
				page:1,
				pagenum:0,
				datalist:[],
				scrollstatu:true
			}
		},
		created:function(){
			this.user=localStorage.getItem("nt_user");
		},
		methods:{
			delcollection:function(goodsid,num){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_favorite&act=drop",
					data:{'token':self.user,'goods_id':goodsid},
					dataType:'json',
					success:function(res){
						if(res.done){
							  layer.open({
							    content: '您确定要取消收藏吗？'
							    ,btn: ['确定', '取消']
							    ,yes: function(index){
							      self.datalist.splice(num,1);
							      layer.close(index);
							    }
							  });
						}
					}
				});
			},
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			ajaxcollection:function(){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_favorite&act=index",
					data:{'token':self.user,'page':self.page},
					dataType:'json',
					success:function(res){
						self.datalist=self.datalist.concat(res.retval.collect_goods);
						self.pagenum=res.retval.page.page_count
						if (self.pagenum != 0) {
							$("#kong").css("display","none")
						}
					}
				});
			},
			scrollajax:function(){
				if(this.scrollstatu){
					if(this.page+1<=this.pagenum){
						var dSH=$(document).scrollTop()
						var dH=$(document).height()
						var wH=$(window).height()
						if((dSH+wH)/dH>0.8){
							this.scrollstatu=false;
							this.page=this.page+1;
							console.log(this.page);
							this.ajaxcollection();
						}
					}
					
				}
			}
		},
		mounted:function(){
			this.ajaxcollection();
			window.addEventListener("scroll",self.scrollajax);
		},
		destroyed:function () {
		    this.scrollstatu = false;
		}
	}
</script>

<style>
	.collection{font-size:0;}
	.collection-list{height:2.65rem;box-sizing:border-box;padding:0.23rem 0.32rem 0.32rem;background-color:#fff;margin-bottom: 0.16rem;}
	.collection-photo{display: inline-block;float:left;width:1.8rem;height:1.8rem;margin-right: 0.24rem;}
	.collection-photo>img{width:1.8rem;height:1.8rem;}
	.collection-xinxi{position:relative;height:1.8rem;}
	.collection-xinxi>h3{font-size:0.26rem;color:#2b2b2b;line-height: 0.34rem;}
	.collection-xinxi>span{font-size:0.32rem;color:#2b2b2b;position:absolute;left:2.04rem;top:0.9rem;}
	.collection-btn{text-align: right;}
	.nocollection{display:inline-block;text-align: center;font-size:0.26rem;color:#999;line-height: 0.28rem;padding:0 0.4rem;}
	.lookshop{display:inline-block;text-align: center;font-size:0.28rem;color:#4C9D31;line-height: 0.28rem;padding-left:0.4rem;border-left:1px solid #eee;}
	#kong{
		text-align: center;
		margin: 0 auto;
		margin-top: 2.2rem;
	}
	#kong img{
		width: 3.6rem;
		height: 3.2rem;
	}
	#kong .kong-p{
		font-size: 0.32rem;
		color: #999999;
		margin-top: 0.84rem;
	}
	#kong .kong-b{
		width: 1.8rem;
		height: 0.7rem;
		border:1px solid #5DB440;
		margin-left:2.85rem;
		margin-top: 0.44rem;
		border-radius: 0.35rem;
	}
	#kong .kong-btn{
		font-size: 0.33rem;
		color: #5DB440;
		line-height: 0.7rem;
	}
</style>